<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue的体验</title>
</head>
<body>
    <div id="box">
        <!-- 点击按钮把hello vue改成hello world -->
        <h1>这是一段话：{{message}}</h1>
        <button @click="changeMsg">点击我会改变</button>
        <!-- 一个数字为1，点一下加2，点一次加一次 -->
    </div>
</body>
<!-- 导入vue3.js脚本 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    // 导入 Vue 的 createApp 函数，用于创建 Vue 应用
    const { createApp } = Vue
    
    // 创建一个新的 Vue 应用，并挂载到拥有 id="box" 的元素上
    createApp({
        // 定义应用的数据属性
        data() {
            return {
                // 初始化 message 属性，值为 'Hello Vue!'
                message: 'Hello Vue!'
            }
        },
        // 定义应用的方法
        methods: {
            // 定义 changeMsg 方法，用于更改 message 属性的值
            changeMsg: ()=> {
                // 将 message 属性的值改为 'hello world'
                this.message = "hello world";
            }
        }
    }).mount('#box')

</script>
</html>